<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<script type="text/javascript" charset="utf-8">
	</script>
	<style>
		#chart1 {
			position: relative;
		}
	</style>
</head>

<body>
<div >
	<h3 align="center">实名制第二季度统计图表分析-综合情况</h3><hr>
    <div class="echarts" id="chart2" style="height: 500px"></div>
    <div class="echarts" id="chart3" style="height: 500px"></div>
	<h3 align="center">实名制第二季度统计图表分析-就业状况</h3><hr>
	<div class="echarts" id="chart1" style="height: 500px"></div>
	<h3 align="center">实名制第二季度统计图表分析-培训状况</h3><hr>
	<div class="echarts" id="chart4" style="height: 500px"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
<script>

	var myChart1 = echarts.init(document.getElementById('chart1'));
	option1 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#999'
				}
			}
		},
		toolbox: {
			feature: {
				dataView: {
					show: true, readOnly: false,
					optionToContent: function (opt) {
						var axisData = opt.xAxis[0].data;
						var series = opt.series;
						var table = '<table class="table"><tbody><tr>'
								+ '<th>就业类型</th>'
								+ '<th>' + series[0].name + '</th>'
								+ '<th>' + series[1].name + '</th>'
								+ '</tr>';
						for (var i = 0, l = axisData.length; i < l; i++) {
							table += '<tr>'
									+ '<td>' + axisData[i] + '</td>'
									+ '<td>' + series[0].data[i] + '</td>'
									+ '<td>' + series[1].data[i] + '</td>'
									+ '</tr>';
						}
						table += '</tbody></table>';
						return table;
					}
				},
				magicType: {show: true, type: ['line', 'bar']},
				restore: {show: true},
				saveAsImage: {show: false},

			}
		},
		legend: {
			data:['人数','占比']
		},
		grid:{
			x:50,
			y:50,
			x2:50,
			y2:100,
			borderWidth:1,
		},
		xAxis: [
			{
				type: 'category',
				data: ['按比例就业','集中就业','个体就业','社区就业','公益性岗位就业','辅助行就业','居家就业','农村种养殖','其他'],
				axisPointer: {
					type: 'shadow'
				},
				axisLabel: {
					interval: 0,
					formatter:function(value)
					{
						var ret = "";//拼接加\n返回的类目项
						var maxLength = 1;//每项显示文字个数
						var valLength = value.length;//X轴类目项的文字个数
						var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
						if (rowN > 1)//如果类目项的文字大于3,
						{
							for (var i = 0; i < rowN; i++) {
								var temp = "";//每次截取的字符串
								var start = i * maxLength;//开始截取的位置
								var end = start + maxLength;//结束截取的位置
								//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
								temp = value.substring(start, end) + "\n";
								ret += temp; //凭借最终的字符串
							}
							return ret;
						}
						else {
							return value;
						}
					}
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				name: '数量',
				min: 0,
				max: 40000,
				interval: 5000,
				axisLabel: {
					formatter: '{value}'
				}
			},
			{
				type: 'value',
				name: '',
				min: 0,
				max: 100,
				interval: 10,
				axisLabel: {
					formatter: '{value} %'
				}
			}
		],
		series: [
			{
				name:'人数',
				type:'bar',
				data:[13988,3027,5937,922,1613,2390,3927,31522,26605]
			},
			{
				name:'占比',
				type:'line',
				yAxisIndex: 1,
				data:[15.55,3.37,6.60,1.03,1.79,2.66,4.37,35.05,29.58]
			}
		]
	};
	myChart1.setOption(option1);

	var myChart2 = echarts.init(document.getElementById('chart2'));
	option2 = {
		title : {
			text: '残疾人就业录入率',
			// subtext: '纯属虚构',
			x:'left'
		},
		tooltip : {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		series : [
			{
				name: '就业录入率',
				type: 'pie',
				radius : '55%',
				center: ['50%', '60%'],
				data:[
					{value:16487332, name:'已录入'},
					{value:17588081-16487332, name:'未录入'},
				],
				itemStyle: {
					emphasis: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart2.setOption(option2);


	var myChart3= echarts.init(document.getElementById('chart3'));
	option3 = {
		title : {
			text: '残疾人培训录入率',
			// subtext: '纯属虚构',
			x:'left'
		},
		tooltip : {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		series : [
			{
				name: '培训录入率',
				type: 'pie',
				radius : '55%',
				center: ['50%', '60%'],
				data:[
					{value:6228197, name:'已培训'},
					{value:17588081-6228197, name:'未培训'},
				],
				itemStyle: {
					emphasis: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart3.setOption(option3);

	var myChart4= echarts.init(document.getElementById('chart4'));
	option4 = {
		title : {
			text: '残疾人计划培训目标',
			// subtext: '纯属虚构',
			x:'left'
		},
		tooltip : {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		series : [
			{
				name: '培训率',
				type: 'pie',
				radius : '55%',
				center: ['50%', '60%'],
				data:[
					{value:119522, name:'已完成'},
					{value:350000-119522, name:'未完成'},
				],
				itemStyle: {
					emphasis: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart4.setOption(option4);
</script>
</body>


</html>